<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-16 17:08:16
 * @Descripttion: 
-->
<template>
  <div class="project-box">
    <div class="btn">
      <el-button @click="addHandler" type="primary" size="mini">
        <el-icon style="vertical-align: middle">
          <plus />
        </el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
      <div class="table-ref" @click="search">
        <img class="table-ref-icon" src="./../../assets/r.png" alt="" />
      </div>
    </div>
    <el-table :data="data.tableData" style="width: 100%" v-loading="$_loading">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button
            @click="editHandler(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            <el-icon style="vertical-align: middle">
              <edit />
            </el-icon>
            <span style="vertical-align: middle"> 编辑 </span>
          </el-button>

          <el-button
            @click="delHandler(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            <el-icon style="vertical-align: middle">
              <delete />
            </el-icon>
            <span style="vertical-align: middle"> 删除 </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paging
      :size="$_size"
      :current="$_current"
      :total="$_total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @search="search"
    />
    <myDrawer
      :drawer="drawer"
      @closeDrawer="closeDrawer"
      :title="title"
      @search="search"
      :tableId="tableId"
    />
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { columns, projectFunc } from "./util";
import { Delete, Edit, Plus } from "@element-plus/icons";
import myDrawer from "./components/drawer.vue";
import { getPage, remove } from "/@/api/HxProject";
import Paging from "./../../components/Pagination/index.vue";
import paging from "/@/mixins/paging";
let drawer = ref(false);
let { closeDrawer } = projectFunc(drawer);
let data = reactive({
  tableData: [],
});
let title = ref("");
let {
  $_size,
  $_total,
  $_current,
  handleSizeChange,
  handleCurrentChange,
  $_loading,
} = paging(search);
// 编辑
let tableId = ref(0);
let editHandler = async (index, row) => {
  drawer.value = true;
  title.value = "编辑";
  tableId.value = row.id;
};
// 新增
let addHandler = async () => {
  drawer.value = true;
  title.value = "新增";
};
// 删除
let delHandler = (index, row) => {
  ElMessageBox.confirm("删除该用户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await remove(row.id);
      res.code == 200
        ? search()
        : ElMessage({
            type: "error",
            message: res.msg,
          });
    })
    .catch(() => {});
};
//  初始化请求获取数据

async function search() {
  $_loading.value = true;
  let res = await getPage({ size: $_size.value, current: $_current.value });
  let { records, total } = res.data;
  data.tableData = records;
  $_total.value = total;
  $_loading.value = false;
}
search();
</script>

<style lang="scss" scoped>
$bg: #ffffff;
.project-box {
  width: 100%;
  min-height: calc(100vh - 120px);
  background: $bg;
  box-sizing: border-box;
  padding: 15px;
  .btn {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>